<template>
  <div class="play-music">
    <interval height="10" />
    <!-- 展示当前歌曲名 -->
    <div class="name">{{ currentName }}</div>
    <interval height="40" />
    <!-- 展示当前歌曲歌词 -->
    <lyric />
    <!-- 音乐播放控制组件 -->
    <my-audio />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import myAudio from './control/myAudio.vue'
import Lyric from './lyric/lyric.vue'
import Interval from '@/components/interval/interval.vue'
import localCache from '@/utils/cache'
import emitter from '@/utils/mitt/eventbus'
export default defineComponent({
  components: { myAudio, Lyric, Interval },
  setup() {
    const currentName = ref('')
    const nameList = ref([])
    /* 先在缓存里面获取一下数据，如果有就添加 */
    if (localCache.getCache('currentName')) {
      currentName.value = localCache.getCache('currentName')
    }
    /* 响应歌曲播放事件 获取歌曲名字*/
    emitter.on('isPlaying', (currentIndex: any): void => {
      nameList.value = localCache.getCache('playList')?.nameCacheList
      currentName.value = nameList.value[currentIndex]
    })

    return { currentName }
  }
})
</script>

<style scoped lang="less">
.play-music {
  position: relative;
  height: 100%;
  background: url('../../assets/img/views/song-play/playBg.png');
  background-size: cover;
  .name {
    font-size: 16px;
    color: #fff;
    height: 0.4rem;
    line-height: 0.6rem;
    text-align: center;
  }
}
</style>
